<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件详情 - 文件共享平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <style>
        :root {
            --primary: #4361ee;
            --primary-dark: #3a0ca3;
            --light: #f8f9fc;
            --dark: #212529;
            --gray: #6c757d;
            --preview-bg: #f8f9fa;
            --text-color: #333;
            --border-color: #dee2e6;
            --card-bg: #ffffff;
            --bg-color: #f5f7fb;
            --text-color-no-dark: #212529; /* 不随深色模式改变的文本颜色 */
        }
        
        /* 不随深色模式改变颜色的文本 */
        .text-no-dark {
            color: var(--text-color-no-dark);
        }
        
        /* 深色模式下的模态框样式 */
        [data-theme="dark"] .modal-content {
            background-color: var(--card-bg);
            color: var(--text-color);
            border-color: var(--border-color);
        }
        
        [data-theme="dark"] .modal-header {
            border-bottom-color: var(--border-color);
        }
        
        [data-theme="dark"] .modal-footer {
            border-top-color: var(--border-color);
        }
        
        /* 深色模式下的按钮样式 */
        [data-theme="dark"] .btn-primary {
            background-color: var(--primary);
            border-color: var(--primary);
        }
        
        [data-theme="dark"] .btn-secondary {
            background-color: var(--gray);
            border-color: var(--gray);
        }
        
        /* 深色模式下的消息提示样式 */
        [data-theme="dark"] .bg-dark-success {
            background-color: #10b981 !important;
        }
        
        [data-theme="dark"] .bg-dark-error {
            background-color: #ef4444 !important;
        }
        
        [data-theme="dark"] .bg-dark-warning {
            background-color: #f59e0b !important;
        }
        
        [data-theme="dark"] .bg-dark-info {
            background-color: #3b82f6 !important;
        }
        

        
        [data-theme="dark"] {
            --primary: #5a76ff;
            --primary-dark: #4a5ad4;
            --light: #1a1c23;
            --dark: #f8f9fa;
            --gray: #a0a8b0;
            --preview-bg: #252b33;
            --text-color: #e0e0e0;
            --border-color: #2d333b;
            --card-bg: #1e2229;
            --bg-color: #121418;
        }
        
        body {
            background-color: var(--bg-color, #f5f7fb);
            color: var(--text-color, #333);
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        .audio-player {
            width: 100%;
            max-width: 100%;
            background: var(--preview-bg);
            border-radius: 5px;
            padding: 10px;
            box-sizing: border-box;
            color: var(--text-color);
        }
        
        [data-theme="dark"] .audio-player {
            background: var(--preview-bg);
            color: var(--text-color);
        }
        
        .video-player {
            width: 100%;
            max-height: 80vh;
            border-radius: 5px;
            background: black;
            /* 添加自适应样式 */
            height: auto;
            object-fit: contain;
        }

        .file-detail-container {
            max-width: 1200px;
            margin: 30px auto;
            background: var(--card-bg);
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }
        
        .file-header {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .file-title {
            font-size: 24px;
            font-weight: 500;
            margin: 0;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            gap: 15px;
            /* IE兼容性：使用margin-right代替gap */
        }
        .file-title > *:not(:last-child) {
            margin-right: 15px;
        }
        
        .file-info {
            display: -ms-flexbox;
            display: flex;
            gap: 20px;
            font-size: 14px;
            opacity: 0.9;
            /* IE兼容性：使用margin-right代替gap */
        }
        .file-info > *:not(:last-child) {
            margin-right: 20px;
        }
        
        .file-content {
            padding: 25px;
        }
        
        .preview-container {
            background-color: var(--preview-bg);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 25px;
            min-height: 500px;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: center;
            justify-content: center;
        }
        
        .image-preview {
            max-width: 100%;
            max-height: 80vh;
            border-radius: 5px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .video-player {
            width: 100%;
            max-height: 80vh;
            border-radius: 5px;
            background: black;
            /* 添加自适应样式 */
            height: auto;
            /* IE不支持object-fit，使用其他方式实现类似效果 */
            object-fit: contain;
        }
        
        .pdf-viewer {
            width: 100%;
            min-height: 500px;
        }
        
        .pdf-controls {
            text-align: center;
            padding: 15px;
            background: var(--preview-bg);
            border-radius: 5px;
            margin-bottom: 20px;
            border: 1px solid var(--border-color);
        }
        
        .pdf-info {
            margin-bottom: 20px;
        }
        
        .pdf-pages-container {
            text-align: center;
        }
        
        .pdf-page {
            max-width: 100%;
            width: 100%;
            margin: 0 auto 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            border: 1px solid var(--border-color);
            background: white;
            display: none; /* 默认隐藏 */
        }
        
        [data-theme="dark"] .pdf-page {
            background: var(--card-bg);
        }
        
        /* 错误信息容器 */
        .alert-warning[data-page] {
            display: none; /* 默认隐藏 */
            max-width: 100%;
            margin: 0 auto 20px;
            text-align: center;
        }
        
        /* 显示当前页面 */
        .pdf-page[data-page]:not([data-page="1"]) {
            display: none;
        }
        
        .pdf-page[data-page="1"] {
            display: block;
        }
        
        /* 移动端适配 */
        @media (max-width: 768px) {
            .file-detail-container {
                margin: 10px;
                border-radius: 5px;
            }
            
            .file-header {
                padding: 15px;
                display: -ms-flexbox;
                -ms-flex-direction: column;
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            .file-header > *:not(:last-child) {
                margin-bottom: 15px;
            }
            
            .file-title {
                font-size: 20px;
                gap: 10px;
            }
            .file-title > *:not(:last-child) {
                margin-right: 10px !important;
            }
            
            .file-info {
                gap: 10px;
                font-size: 12px;
            }
            .file-info > *:not(:last-child) {
                margin-right: 10px !important;
            }
            
            .file-content {
                padding: 15px;
            }
            
            .preview-container {
                padding: 10px;
                min-height: 300px;
            }
            
            .pdf-page {
                max-width: 100vw;
                margin: 0 0 15px 0;
            }
            
            .pdf-controls {
                padding: 10px;
            }
            
            .pdf-controls .btn {
                padding: 5px 10px;
                font-size: 14px;
            }
            
            .page-info {
                font-size: 14px;
            }
        }
        
        @media (max-width: 480px) {
            .file-header {
                padding: 10px;
            }
            
            .file-title {
                font-size: 18px;
            }
            
            .file-info {
                -ms-flex-direction: column;
                flex-direction: column;
                gap: 5px;
            }
            
            .action-buttons .btn {
                padding: 8px 12px;
                font-size: 14px;
            }
            
            .pdf-controls .btn {
                padding: 4px 8px;
                font-size: 12px;
            }
            
            .page-info {
                font-size: 12px;
            }
        }
        
        .unsupported-container {
            text-align: center;
            padding: 40px 20px;
            background: var(--preview-bg);
            border-radius: 8px;
            margin: 20px 0;
        }
        
        .unsupported-icon {
            font-size: 3rem;
            color: var(--text-muted);
            margin-bottom: 15px;
        }
        
        .text-content {
            font-family: monospace;
            white-space: pre-wrap;
            background-color: var(--preview-bg);
            padding: 20px;
            border-radius: 5px;
            max-height: 70vh;
            overflow: auto;
            width: 100%;
            color: var(--text-color);
            transition: background-color 0.3s, color 0.3s;
            /* 添加自适应样式 */
            height: auto;
        }
        
        .theme-switch-container {
            position: fixed;
            top: 15px;
            right: 15px;
            z-index: 1000;
        }
        
        #theme-toggle {
            background-color: var(--card-bg);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
        }
    </style>
</head>
<body>
    <div class="theme-switch-container">
        <button id="theme-toggle" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-moon"></i> 深色模式
        </button>
    </div>

    <div class="file-detail-container">
        <div class="file-header">
            <div>
                <h1 class="file-title">
                    <i class="bi bi-file-earmark" id="file-icon"></i>
                    <span id="file-name">文件详情</span>
                </h1>
                <div class="file-info">
                    <span id="file-size"></span>
                    <span id="file-type"></span>
                </div>
            </div>
            <div class="action-buttons">
                <a href="#" id="download-btn" class="btn btn-light">
                    <i class="bi bi-download"></i> 下载文件
                </a>
                <a href="javascript:history.back()" class="btn btn-outline-light">
                    <i class="bi bi-arrow-left"></i> 返回
                </a>
            </div>
        </div>
        
        <div class="file-content">
            <div class="preview-container" id="preview-container">
                <div class="text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <p class="mt-3">正在加载文件预览...</p>
                </div>
            </div>
            
            <div class="file-meta">
                <div class="meta-grid">
                    <div class="meta-item">
                        <span class="meta-label">上传时间</span>
                        <span class="meta-value" id="upload-time"></span>
                    </div>
                    <div class="meta-item">
                        <span class="meta-label">最后修改</span>
                        <span class="meta-value" id="modified-time"></span>
                    </div>
                    <div class="meta-item">
                        <span class="meta-label">下载次数</span>
                        <span class="meta-value" id="download-count"></span>
                    </div>
                    <div class="meta-item">
                        <span class="meta-label">文件类型</span>
                        <span class="meta-value" id="file-type-full"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- PDF.js 库 -->
    <script src="/api/pdfjs/pdf.min.js"></script>
    <script src="/api/pdfjs/pdf.worker.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 确保PDF.js已加载
            if (typeof pdfjsLib === 'undefined') {
                console.error('PDF.js库未加载');
                return;
            }
            
            // 设置PDF.js工作路径
            pdfjsLib.GlobalWorkerOptions.workerSrc = '/api/pdfjs/pdf.worker.min.js';

            // 从URL获取文件名
            const params = new URLSearchParams(window.location.search);
            const filename = params.get('file');
            
            if (!filename) {
                showMessage('未指定文件', 'error');
                setTimeout(() => {
                    window.location.href = '/';
                }, 1000);
                return;
            }
            
            // 确保文件名正确解码
            const decodedFilename = decodeURIComponent(filename);
            
            // 设置文件名，并提取显示后缀
            const fileParts = decodedFilename.split('.');
            const extension = fileParts.length > 1 ? '.' + fileParts.pop().toLowerCase() : '';
            const nameWithoutExt = fileParts.join('.');
            
            const fileNameElement = document.getElementById('file-name');
            fileNameElement.innerHTML = `
                <span>${nameWithoutExt}</span>
                <span class="text-muted">${extension}</span>
            `;
            
            // 获取文件信息
            fetch(`/api/file_info?filename=${encodeURIComponent(filename)}`)
                .then(response => response.json())
                .then(fileInfo => {
                    if (!fileInfo) {
                        throw new Error('文件信息获取失败');
                    }
                    
                    // 更新文件信息
                    document.getElementById('file-size').textContent = formatBytes(fileInfo.size);
                    document.getElementById('download-count').textContent = fileInfo.download_count || 0;
                    
                    // 设置时间信息
                    if (fileInfo.created) {
                        document.getElementById('upload-time').textContent = new Date(fileInfo.created * 1000).toLocaleString();
                    }
                    
                    if (fileInfo.modified) {
                        document.getElementById('modified-time').textContent = new Date(fileInfo.modified * 1000).toLocaleString();
                    }
                    
                    // 设置下载链接
                    document.getElementById('download-btn').href = `/download/${encodeURIComponent(filename)}`;
                    
                    // 确保预览链接也使用encodeURIComponent
                    // 这会在renderPreview函数中使用
                    
                    // 根据文件类型渲染预览
                    renderPreview(filename, fileInfo);
                    
                    // 设置文件图标
                    const ext = filename.split('.').pop().toLowerCase();
                    setFileIcon(ext);
                })
                .catch(error => {
                    console.error('获取文件信息失败:', error);
                    document.getElementById('preview-container').innerHTML = `
                        <div class="alert alert-danger">
                            <i class="bi bi-exclamation-triangle"></i> 加载文件信息失败: ${error.message}
                        </div>
                    `;
                });
            
            // 格式化文件大小
            function formatBytes(bytes) {
                if (bytes === 0) return "0B";
                
                const k = 1024;
                const sizes = ["B", "KB", "MB", "GB", "TB"];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
            }
            
            // 根据文件类型渲染预览
            function renderPreview(filename, fileInfo) {
                // 确保文件名正确解码
                const decodedFilename = decodeURIComponent(filename);
                const container = document.getElementById('preview-container');
                const ext = filename.split('.').pop().toLowerCase();
                
                // 设置文件类型
                document.getElementById('file-type').textContent = ext.toUpperCase();
                document.getElementById('file-type-full').textContent = getFileTypeDescription(ext);
                
                // 设置文件图标
                setFileIcon(ext);
                
                // 处理文件下载，支持IE浏览器
                function downloadFile(filename) {
                    // 对于IE浏览器，使用msSaveBlob方法
                    if (window.navigator && window.navigator.msSaveBlob) {
                        fetch(`/preview/${filename}`)
                            .then(response => response.blob())
                            .then(blob => {
                                window.navigator.msSaveBlob(blob, decodeURIComponent(filename));
                            })
                            .catch(error => {
                                console.error('下载失败:', error);
                                alert('文件下载失败，请稍后再试。');
                            });
                    } else {
                        // 对于现代浏览器，使用传统下载方式
                        const link = document.createElement('a');
                        link.href = `/preview/${filename}`;
                        link.download = decodeURIComponent(filename);
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }
                }
                
                // 根据文件类型渲染预览
                if (isImage(ext)) {
                    container.innerHTML = `
                        <img src="/preview/${encodeURIComponent(filename)}" 
                             class="image-preview" alt="${encodeURIComponent(filename)}" onload="adjustImageSize(this)">
                    `;
                } 
                else if (ext === 'pdf') {
                    container.innerHTML = `
                        <div id="pdf-viewer" class="pdf-viewer"></div>
                    `;
                    
                    // 使用PDF.js渲染PDF
                    renderPDF(filename);
                } 
                else if (isVideo(ext)) {
                    // 设置正确的MIME类型
                    let mimeType = 'video/' + ext;
                    if (ext === 'mp4') mimeType = 'video/mp4';
                    else if (ext === 'webm') mimeType = 'video/webm';
                    else if (ext === 'ogg') mimeType = 'video/ogg';
                    else if (ext === 'mov') mimeType = 'video/quicktime';
                    else if (ext === 'avi') mimeType = 'video/x-msvideo';
                      
                    container.innerHTML = `
                        <video id="video-player" controls class="video-player" preload="metadata">
                            <source src="/preview/${encodeURIComponent(filename)}" type="${mimeType}">
                            <p>您的浏览器不支持视频播放。请尝试以下操作：</p>
                            <ul>
                                <li>更新您的浏览器到最新版本</li>
                                <li>尝试使用不同的浏览器</li>
                                <li><a href="/preview/${encodeURIComponent(filename)}" onclick="downloadFile('${encodeURIComponent(filename)}'); return false;">下载文件</a>后使用本地播放器观看</li>
                            </ul>
                        </video>
                    `;
                    
                    // 添加视频编码支持检测
                    const videoElement = document.getElementById('video-player');
                    videoElement.addEventListener('error', function() {
                        // 检查是否是编码不支持的错误
                        if (videoElement.error && videoElement.error.code === 4) { // MEDIA_ERR_SRC_NOT_SUPPORTED
                            const videoContainer = videoElement.parentElement;
                            videoContainer.innerHTML = `
                                <div class="alert alert-warning">
                                    <i class="bi bi-exclamation-triangle"></i>
                                    <strong>视频编码不支持</strong>
                                    <p>您的浏览器可能不支持此视频的编码格式。这是常见的IE浏览器兼容性问题。</p>
                                    <ul>
                                        <li>建议使用Chrome、Firefox或Edge浏览器观看</li>
                                        <li>或者<a href="/preview/${encodeURIComponent(filename)}" onclick="downloadFile('${encodeURIComponent(filename)}'); return false;">下载视频</a>后使用本地播放器（如VLC、Windows Media Player）观看</li>
                                    </ul>
                                </div>
                            `;
                        }
                    });
                    
                    // 对于MP4格式，额外检查H.264编码支持
                    if (ext === 'mp4') {
                        // 检查浏览器是否支持MP4/H.264编码
                        const canPlayMP4 = videoElement.canPlayType('video/mp4; codecs="avc1.42E01E"');
                        if (canPlayMP4 === '' || canPlayMP4 === 'no') {
                            // IE浏览器可能支持MP4但编码支持有限，显示提示
                            const videoContainer = videoElement.parentElement;
                            const infoDiv = document.createElement('div');
                            infoDiv.className = 'alert alert-info mt-2';
                            infoDiv.innerHTML = `
                                <i class="bi bi-info-circle"></i>
                                <strong>编码兼容性提示</strong>
                                <p>您的浏览器可能不完全支持此MP4视频的编码。如果视频无法播放，请下载后使用本地播放器观看。</p>
                            `;
                            videoContainer.appendChild(infoDiv);
                        }
                    }
                } 
                else if (isAudio(ext)) {
                    // 添加音频播放器
                    let mimeType = 'audio/' + ext;
                    if (ext === 'mp3') {
                        mimeType = 'audio/mpeg';
                    } else if (ext === 'wav') {
                        mimeType = 'audio/wav';
                    } else if (ext === 'ogg') {
                        mimeType = 'audio/ogg';
                    }
                    
                    container.innerHTML = `
                        <audio controls class="audio-player">
                            <source src="/preview/${encodeURIComponent(filename)}" type="${mimeType}">
                            您的浏览器不支持音频播放
                        </audio>
                    `;
                } 
                else if (isTextFile(ext)) {
                    // 获取文本内容（添加编码处理）
                fetch(`/preview/${encodeURIComponent(filename)}`)
                    .then(response => {
                    const reader = response.body.getReader();
                        return new ReadableStream({
                            start(controller) {
                                function push() {
                                    reader.read().then(({ done, value }) => {
                                        if (done) {
                                            controller.close();
                                            return;
                                        }
                                        controller.enqueue(value);
                                        push();
                                    });
                                }
                        push();
                    }
                });
            })
            .then(stream => new Response(stream))
            .then(response => response.arrayBuffer())
            .then(buffer => {
            // 精简但更有效的编码列表
            const encodings = [
                'utf-8', 'gbk', 'gb2312', 'big5', 'gb18030',
                'iso-8859-1', 'windows-1252', 'shift_jis', 'euc-jp',
                'euc-kr', 'iso-2022-jp', 'iso-2022-kr', 'koi8-ru', 
                'macintosh', 'x-mac-cyrillic'
            ];
            
            let decodedText = null;
            let encodingUsed = null;
            let success = false;
    
            for (const encoding of encodings) {
                try {
                    const decoder = new TextDecoder(encoding);
                    decodedText = decoder.decode(buffer);
                    encodingUsed = encoding;
                    
                    // 检测乱码字符（�）
                    if (decodedText.includes('�')) {
                        continue; // 尝试下一个编码
                    }
                    
                    success = true;
                    break; // 成功解码则跳出循环
                } catch (e) {
                    // 解码失败，尝试下一个编码
                }
            }
    
            if (!success) {
                // 如果都不行，尝试非致命解码（使用UTF-8，忽略错误）
                try {
                    const decoder = new TextDecoder('utf-8', { fatal: false });
                    decodedText = decoder.decode(buffer);
                    encodingUsed = 'utf-8 (非严格模式)';
                    success = true;
                } catch (e) {
                    decodedText = null;
                }
            }
    
            if (success) {
                container.innerHTML = `
                    <div class="alert alert-info mb-3">
                        检测到编码: ${encodingUsed}
                        <button class="btn btn-sm btn-outline-primary float-end" id="change-encoding-btn">
                            手动更改编码
                        </button>
                    </div>
                    <pre class="text-content">${decodedText}</pre>
                    <div class="encoding-selector d-none mt-3" id="encoding-selector">
                        <div class="d-flex align-items-center">
                            <label class="me-2">选择编码:</label>
                            <select class="form-select me-2" id="encoding-select">
                                ${encodings.map(enc => `<option value="${enc}" ${enc === encodingUsed ? 'selected' : ''}>${enc}</option>`).join('')}
                            </select>
                            <button class="btn btn-primary" id="apply-encoding-btn">应用</button>
                        </div>
                    </div>
                `;
                
                // 添加手动更改编码功能
                document.getElementById('change-encoding-btn').addEventListener('click', function() {
                    document.getElementById('encoding-selector').classList.remove('d-none');
                });
                
                document.getElementById('apply-encoding-btn').addEventListener('click', function() {
                    const selectedEncoding = document.getElementById('encoding-select').value;
                    try {
                        const decoder = new TextDecoder(selectedEncoding);
                        const newDecodedText = decoder.decode(buffer);
                        document.querySelector('.text-content').textContent = newDecodedText;
                        document.querySelector('.alert').innerHTML = `当前编码: ${selectedEncoding}`;
                    } catch (e) {
                        showMessage(`使用编码 ${selectedEncoding} 解码失败: ${e.message}`, 'error');
                    }
                });
            } else {
                // 最终失败，显示错误信息和手动编码选择器
                container.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-triangle"></i> 无法自动解码文件内容
                        <p class="mt-2">请尝试手动选择编码:</p>
                    </div>
                    <div class="encoding-selector mt-3">
                        <div class="d-flex align-items-center">
                            <label class="me-2">选择编码:</label>
                            <select class="form-select me-2" id="encoding-select">
                                ${encodings.map(enc => `<option value="${enc}">${enc}</option>`).join('')}
                            </select>
                            <button class="btn btn-primary" id="apply-encoding-btn">尝试解码</button>
                        </div>
                    </div>
                    <div class="text-content mt-3" id="decoded-text-area"></div>
                `;
                
                document.getElementById('apply-encoding-btn').addEventListener('click', function() {
                    const selectedEncoding = document.getElementById('encoding-select').value;
                    try {
                        const decoder = new TextDecoder(selectedEncoding);
                        const decodedText = decoder.decode(buffer);
                        document.getElementById('decoded-text-area').textContent = decodedText;
                    } catch (e) {
                        showMessage(`使用编码 ${selectedEncoding} 解码失败: ${e.message}`, 'error');
                    }
                });
            }
        })
        .catch(error => {
            container.innerHTML = `
                <div class="alert alert-danger">
                            <i class="bi bi-exclamation-triangle"></i> 加载文本内容失败: ${error.message}
                            <p class="mt-2">请尝试<a href="/preview/${encodeURIComponent(filename)}" download>下载文件</a>后用文本编辑器打开</p>
                        </div>
                    `;
                });
}
                else {
                    // 为压缩文件和可执行文件提供更明确的提示
                    let fileTypeMessage = '此文件类型不支持在线预览';
                    let fileTypeClass = '';
                    
                    if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext)) {
                        fileTypeMessage = '压缩文件不支持在线预览，请下载后解压查看';
                        fileTypeClass = 'compressed-file';
                    } else if (['exe', 'msi', 'dll', 'sys', 'com'].includes(ext)) {
                        fileTypeMessage = '可执行文件不支持在线预览，请下载后运行';
                        fileTypeClass = 'executable-file';
                    } else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) {
                        fileTypeMessage = 'Office文档不支持在线预览，请下载后用相应软件打开';
                        fileTypeClass = 'office-file';
                    }
                    
                    container.innerHTML = `
                        <div class="unsupported-container ${fileTypeClass}">
                            <i class="bi bi-file-earmark-x unsupported-icon"></i>
                            <h4>不支持在线预览</h4>
                            <p class="text-muted">${fileTypeMessage}</p>
                            <a href="/preview/${encodeURIComponent(filename)}" class="btn btn-primary mt-3">
                                <i class="bi bi-download"></i> 下载文件
                            </a>
                            <div class="mt-4 alert alert-info">
                                <i class="bi bi-info-circle"></i>
                                <strong>文件名：</strong>${decodedFilename}
                                <br>
                                <strong>文件大小：</strong>${document.getElementById('file-size').textContent}
                            </div>
                        </div>
                    `;
                }
            }
            
            // 渲染PDF
            function renderPDF(filename) {
                // 配置PDF.js worker
                pdfjsLib.GlobalWorkerOptions.workerSrc = '/api/pdfjs/pdf.worker.min.js';
                
                const container = document.getElementById('preview-container');
                const encodedFilename = encodeURIComponent(filename);
                const pdfUrl = `/preview/${encodedFilename}`;
                
                console.log('开始加载PDF:', pdfUrl);
                
                // 设置加载状态
                container.innerHTML = `
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <p class="mt-2">正在加载PDF文档...</p>
                    </div>
                `;
                
                // 初始化loadingTask
                const loadingTask = pdfjsLib.getDocument({
                    url: pdfUrl,
                    withCredentials: false,
                    cMapUrl: '/api/cmaps/',
                    cMapPacked: true,
                    disableAutoFetch: false,  // 允许自动获取
                    disableStream: false      // 允许流式加载
                });
            
                // 获取PDF信息
                fetch(`/api/pdf_info?filename=${encodedFilename}`)
                    .then(response => {
                        console.log('PDF信息响应状态:', response.status);
                        return response.json();
                    })
                    .then(data => {
                        console.log('PDF信息:', data);
                        if (data.status === 'success') {
                            const infoDiv = document.createElement('div');
                            infoDiv.className = 'pdf-info mb-3';
                            infoDiv.innerHTML = `
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title">PDF信息</h5>
                                        <p class="card-text">页数: ${data.pages}</p>
                                        <p class="card-text">标题: ${data.metadata.title || '无'}</p>
                                        <p class="card-text">作者: ${data.metadata.author || '无'}</p>
                                    </div>
                                </div>
                            `;
                            container.appendChild(infoDiv);
                        }
                    })
                    .catch(error => {
                        console.error('获取PDF信息失败:', error);
                    });
            
                // 处理PDF渲染
                loadingTask.promise.then(pdf => {
                    console.log('PDF加载成功，页数:', pdf.numPages);
                    container.innerHTML = '<div id="pdf-viewer" class="pdf-viewer"></div>';
                    const pdfViewer = document.getElementById('pdf-viewer');
                    
                    // 创建分页控制
                    const pageControls = document.createElement('div');
                    pageControls.className = 'pdf-controls mb-3';
                    pageControls.innerHTML = `
                        <button class="btn btn-sm btn-outline-primary prev-page">
                            <i class="bi bi-arrow-left"></i> 上一页
                        </button>
                        <span class="page-info mx-2">第 <span id="current-page">1</span> 页 / 共 <span id="total-pages">0</span> 页</span>
                        <button class="btn btn-sm btn-outline-primary next-page">
                            下一页 <i class="bi bi-arrow-right"></i>
                        </button>
                    `;
                    pdfViewer.appendChild(pageControls);
                    
                    const totalPages = pdf.numPages;
                    document.getElementById('total-pages').textContent = totalPages;
                    
                    // 创建画布容器
                    const canvasContainer = document.createElement('div');
                    canvasContainer.className = 'pdf-pages-container';
                    pdfViewer.appendChild(canvasContainer);
                    
                    // 渲染所有页面
                    for (let i = 1; i <= totalPages; i++) {
                        renderPage(pdf, i, canvasContainer);
                    }
                    
                    // 在底部添加分页控制
                    const bottomPageControls = document.createElement('div');
                    bottomPageControls.className = 'pdf-controls mt-3';
                    bottomPageControls.innerHTML = `
                        <button class="btn btn-sm btn-outline-primary prev-page-bottom">
                            <i class="bi bi-arrow-left"></i> 上一页
                        </button>
                        <span class="page-info mx-2">第 <span id="current-page-bottom">1</span> 页 / 共 <span id="total-pages-bottom">${totalPages}</span> 页</span>
                        <button class="btn btn-sm btn-outline-primary next-page-bottom">
                            下一页 <i class="bi bi-arrow-right"></i>
                        </button>
                    `;
                    pdfViewer.appendChild(bottomPageControls);
                    
                    // 等待所有页面渲染完成后再显示第一页并绑定事件
                    setTimeout(() => {
                        // 显示第一页
                        const firstPageElements = canvasContainer.querySelectorAll('[data-page="1"]');
                        firstPageElements.forEach(el => {
                            // 对于canvas元素，使用style.display
                            // 对于div元素(错误信息)，也使用style.display
                            el.style.display = 'block';
                        });
                        
                        // 更新分页控制事件
                        let currentPage = 1;
                        
                        // 更新顶部和底部页码显示
                        function updatePageInfo() {
                            document.getElementById('current-page').textContent = currentPage;
                            document.getElementById('current-page-bottom').textContent = currentPage;
                        }
                        
                        // 上一页按钮事件（顶部）
                        document.querySelector('.prev-page').addEventListener('click', () => {
                            if (currentPage > 1) {
                                // 隐藏当前页
                                const currentPageElements = canvasContainer.querySelectorAll(`[data-page="${currentPage}"]`);
                                currentPageElements.forEach(el => {
                                    el.style.display = 'none';
                                });
                                
                                // 显示上一页
                                currentPage--;
                                const prevPageElements = canvasContainer.querySelectorAll(`[data-page="${currentPage}"]`);
                                prevPageElements.forEach(el => {
                                    el.style.display = 'block';
                                });
                                
                                updatePageInfo();
                            }
                        });
                        
                        // 下一页按钮事件（顶部）
                        document.querySelector('.next-page').addEventListener('click', () => {
                            if (currentPage < totalPages) {
                                // 隐藏当前页
                                const currentPageElements = canvasContainer.querySelectorAll(`[data-page="${currentPage}"]`);
                                currentPageElements.forEach(el => {
                                    el.style.display = 'none';
                                });
                                
                                // 显示下一页
                                currentPage++;
                                const nextPageElements = canvasContainer.querySelectorAll(`[data-page="${currentPage}"]`);
                                nextPageElements.forEach(el => {
                                    el.style.display = 'block';
                                });
                                
                                updatePageInfo();
                            }
                        });
                        
                        // 上一页按钮事件（底部）
                        document.querySelector('.prev-page-bottom').addEventListener('click', () => {
                            if (currentPage > 1) {
                                // 隐藏当前页
                                const currentPageElements = canvasContainer.querySelectorAll(`[data-page="${currentPage}"]`);
                                currentPageElements.forEach(el => {
                                    el.style.display = 'none';
                                });
                                
                                // 显示上一页
                                currentPage--;
                                const prevPageElements = canvasContainer.querySelectorAll(`[data-page="${currentPage}"]`);
                                prevPageElements.forEach(el => {
                                    el.style.display = 'block';
                                });
                                
                                updatePageInfo();
                            }
                        });
                        
                        // 下一页按钮事件（底部）
                        document.querySelector('.next-page-bottom').addEventListener('click', () => {
                            if (currentPage < totalPages) {
                                // 隐藏当前页
                                const currentPageElements = canvasContainer.querySelectorAll(`[data-page="${currentPage}"]`);
                                currentPageElements.forEach(el => {
                                    el.style.display = 'none';
                                });
                                
                                // 显示下一页
                                currentPage++;
                                const nextPageElements = canvasContainer.querySelectorAll(`[data-page="${currentPage}"]`);
                                nextPageElements.forEach(el => {
                                    el.style.display = 'block';
                                });
                                
                                updatePageInfo();
                            }
                        });
                    }, 1000);
                }).catch(error => {
                    console.error('PDF加载失败:', error);
                    console.error('错误详情:', {
                        message: error.message,
                        name: error.name,
                        stack: error.stack
                    });
                    
                    // 检查是否为204错误，提示用户关闭下载器
                    let errorMessage = error.message;
                    let additionalInfo = '';
                    if (error.message && error.message.includes('204')) {
                        additionalInfo = '<p class="mt-2">检测到服务器返回204状态码，可能是下载管理器（如IDM）拦截了请求。请暂时关闭下载管理器后再试。</p>';
                    }
                    
                    container.innerHTML = `
                        <div class="alert alert-danger">
                            <i class="bi bi-exclamation-triangle"></i> PDF加载失败
                            <p class="mt-2">错误信息: ${errorMessage}</p>
                            ${additionalInfo}
                            <p class="mt-2">可能原因：文件损坏、浏览器不支持或文件过大</p>
                            <p>请尝试<a href="${pdfUrl}" download>下载文件</a>后用本地PDF阅读器打开</p>
                        </div>
                    `;
                });
            }
                
                // 渲染单页PDF
                function renderPage(pdf, pageNumber, container) {
                    pdf.getPage(pageNumber).then(page => {
                        // 获取容器宽度以适应页面
                        const containerWidth = container.clientWidth;
                        const viewport = page.getViewport({ scale: 1 });
                        
                        // 计算适应容器的缩放比例
                        const scale = containerWidth / viewport.width * 0.95; // 留一些边距
                        const scaledViewport = page.getViewport({ scale: scale });
                        
                        // 准备canvas渲染
                        const canvas = document.createElement('canvas');
                        const context = canvas.getContext('2d');
                        canvas.height = scaledViewport.height;
                        canvas.width = scaledViewport.width;
                        canvas.className = 'pdf-page';
                        canvas.style.display = 'none'; // 默认隐藏
                        canvas.setAttribute('data-page', pageNumber);
                        
                        // 添加到容器
                        container.appendChild(canvas);
                        
                        // 渲染PDF页面到canvas
                        const renderContext = {
                            canvasContext: context,
                            viewport: scaledViewport
                        };
                        
                        const renderTask = page.render(renderContext);
                        
                        renderTask.promise.then(() => {
                            console.log(`页面 ${pageNumber} 渲染完成`);
                        }).catch(error => {
                            console.error('页面渲染错误:', error);
                            // 创建错误信息div而不是在canvas内添加内容
                            const errorDiv = document.createElement('div');
                            errorDiv.className = 'alert alert-warning';
                            errorDiv.innerHTML = `
                                <i class="bi bi-exclamation-triangle"></i> 页面 ${pageNumber} 渲染失败
                            `;
                            errorDiv.style.display = 'none';
                            errorDiv.setAttribute('data-page', pageNumber);
                            container.appendChild(errorDiv);
                        });
                    }).catch(error => {
                        console.error('获取页面失败:', error);
                        const errorDiv = document.createElement('div');
                        errorDiv.className = 'alert alert-warning';
                        errorDiv.innerHTML = `
                            <i class="bi bi-exclamation-triangle"></i> 无法获取PDF页面 ${pageNumber}
                        `;
                        errorDiv.style.display = 'none';
                        errorDiv.setAttribute('data-page', pageNumber);
                        container.appendChild(errorDiv);
                    });
                }
                
                // 调整图片大小以适应容器
                function adjustImageSize(img) {
                    // 确保图片已加载
                    if (!img.complete) return;
                    
                    // 获取容器和图片的尺寸
                    const container = img.parentElement;
                    const containerWidth = container.clientWidth;
                    const containerHeight = container.clientHeight;
                    
                    // 重置图片样式
                    img.style.width = 'auto';
                    img.style.height = 'auto';
                    img.style.maxWidth = '100%';
                    img.style.maxHeight = '100%';
                    
                    // 如果图片比容器大，则缩放图片
                    if (img.naturalWidth > containerWidth || img.naturalHeight > containerHeight) {
                        // 计算缩放比例
                        const widthRatio = containerWidth / img.naturalWidth;
                        const heightRatio = containerHeight / img.naturalHeight;
                        const scale = Math.min(widthRatio, heightRatio) * 0.95; // 留一些边距
                        
                        img.style.width = (img.naturalWidth * scale) + 'px';
                        img.style.height = (img.naturalHeight * scale) + 'px';
                    }
                }
                
                // 检查是否为图片
                function isImage(ext) {
                    return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext);
                }
                
                // 检查是否为视频
                function isVideo(ext) {
                    return ['mp4', 'webm', 'ogg', 'mov', 'avi', 'mkv', 'flv', 'wmv'].includes(ext);
                }
                
                // 检查是否为音频
                function isAudio(ext) {
                    return ['mp3', 'wav', 'ogg', 'flac', 'aac'].includes(ext);
                }

                // 检查是否为文本文件(包括代码文件)
                function isTextFile(ext) {
                    return [
                        'txt', 'md', 'markdown', 'html', 'htm', 'css', 'js', 'json',
                        'py', 'java', 'cpp', 'c', 'h', 'hpp', 'cs', 'php', 'rb', 'go',
                        'rs', 'sh', 'bash', 'bat', 'cmd', 'ps1', 'sql', 'xml', 'yaml',
                        'yml', 'ini', 'conf', 'config', 'log', 'properties', 'csv',
                        'ts', 'tsx', 'jsx', 'vue', 'less', 'scss', 'sass', 'styl'
                    ].includes(ext);
                }

                // 获取文件类型描述
                function getFileTypeDescription(ext) {
                    const types = {
                        // 图片类型
                        'ico': '图标文件',
                        'jpg': 'JPEG 图片',
                        'jpeg': 'JPEG 图片',
                        'png': 'PNG 图片',
                        'gif': 'GIF 图片',
                        'bmp': '位图图片',
                        'webp': 'WebP 图片',
                        // 视频类型
                        'mp4': 'MP4 视频',
                        'webm': 'WebM 视频',
                        'ogg': 'OGG 视频',
                        'mov': 'QuickTime 视频',
                        'avi': 'AVI 视频',
                        'mkv': 'MKV 视频',
                        'flv': 'FLV 视频',
                        'wmv': 'WMV 视频',
                        '3gp': '3GP 视频',
                        'm4v': 'M4V 视频',
                        // 文档类型
                        'pdf': 'PDF 文档',
                        'txt': '文本文件',
                        'doc': 'Word 文档',
                        'docx': 'Word 文档',
                        'xls': 'Excel 表格',
                        'xlsx': 'Excel 表格',
                        'ppt': 'PowerPoint 演示',
                        'pptx': 'PowerPoint 演示',
                        // 压缩包类型
                        'zip': 'ZIP 压缩文件',
                        'rar': 'RAR 压缩文件',
                        '7z': '7-Zip 压缩文件',
                        'gz': 'GZip 压缩文件',
                        'bz2': 'BZip2 压缩文件',
                        // 音频类型
                        'mp3': 'MP3 音频文件',
                        'wav': 'WAV 音频文件',
                        'ogg': 'OGG 音频文件',
                        'flac': 'FLAC 音频文件',
                        'aac': 'AAC 音频文件',
                        // Windows特有文件类型
                        'exe': 'Windows可执行文件',
                        'bat': 'Windows批处理文件',
                        'msi': 'Windows安装程序',
                        'dll': 'Windows动态链接库',
                        'cmd': 'Windows命令文件',
                        'reg': 'Windows注册表文件',
                        'sys': 'Windows系统文件',
                        'cab': 'Windows安装包',
                        'inf': 'Windows安装信息文件',
                        'scr': 'Windows屏幕保护程序',
                        'com': 'Windows命令文件',
                        'cpl': 'Windows控制面板项',
                        'msc': 'Windows控制台应用程序',
                        'ocx': 'Windows控件',
                        'ax': 'WindowsActiveX控件',
                        'chm': 'Windows帮助文件',
                        'msp': 'Windows修补程序',
                        'msu': 'Windows更新程序',
                        'mui': 'Windows多语言界面文件',
                        'ps1': 'Windows PowerShell脚本',
                        'psm1': 'Windows PowerShell模块',
                        'psd1': 'Windows PowerShell数据文件',
                        'ps1xml': 'Windows PowerShell配置文件',
                        'pssc': 'Windows PowerShell配置文件',
                        'psexec': 'Windows远程执行工具',
                        // 编程语言文件类型
                        'sh': 'Shell脚本',
                        'py': 'Python脚本',
                        'java': 'Java源代码',
                        'cpp': 'C++源代码',
                        'c': 'C源代码',
                        'go': 'Go源代码',
                        'rb': 'Ruby脚本',
                        'swift': 'Swift源代码',
                        'rs': 'Rust源代码',
                        'kt': 'Kotlin源代码',
                        'h': 'C/C++头文件',
                        // web文件类型
                        'js': 'JavaScript脚本',
                        'ts': 'TypeScript脚本',
                        'php': 'PHP脚本',
                        'html': 'HTML文件',
                        'css': 'CSS文件',
                        // 配置文件类型
                        'json': 'JSON文件',
                        'xml': 'XML文件',
                        'yaml': 'YAML文件',
                        'yml': 'YAML文件',
                        'toml': 'TOML文件',
                        'ini': 'INI文件',
                        'conf': '配置文件',
                        // 数据库文件类型
                        'sql': 'SQL文件',
                        'db': '数据库文件',
                        'mdb': 'Microsoft Access数据库文件',
                        'sqlite': 'SQLite数据库文件',
                        'dbf': 'dBASE数据库文件',
                        'accdb': 'Microsoft Access数据库文件',
                        'mdbx': 'Microsoft Access数据库文件',
                        'sqlitedb': 'SQLite数据库文件',
                        'sqlite3': 'SQLite数据库文件',
                        'sqlite2': 'SQLite数据库文件',
                        'db3': 'SQLite数据库文件',
                        'db2': 'SQLite数据库文件',
                        'db4': 'SQLite数据库文件',
                        'db5': 'SQLite数据库文件',
                        'db6': 'SQLite数据库文件',
                        'db7': 'SQLite数据库文件',
                        'db8': 'SQLite数据库文件',
                        'db9': 'SQLite数据库文件',
                        // Mac OS特有文件类型
                        'app': 'Mac OS应用程序',
                        'dmg': 'Mac OS磁盘映像',
                        'pkg': 'Mac OS安装包',
                        'command': 'Mac OS命令文件',
                        'plist': 'Mac OS属性列表文件',
                        'icns': 'Mac OS图标文件',
                        // 日志文件类型
                        'log': '日志文件',
                        // 其它常见文件类型
                        'chm': '帮助文件',
                        'md': 'Markdown文件',
                        'csv': '逗号分隔值文件',
                        'tsv': '制表符分隔值文件',
                        'rtf': '富文本格式文件',
                        'odt': 'OpenDocument文本文件',
                        'epub': '电子书文件',
                        'po': 'PO文件',
                        'mo': 'MO文件',
                        'pot': 'POT文件',
                        'lang': '语言文件',
                        'properties': 'Java属性文件',
                        //特殊文件
                        'aktp': 'Advanced_Key_Tools_GUI加密文件'
                    };

                    return types[ext] || '未知文件类型';
                }
                
                // 设置文件图标
                function setFileIcon(ext) {
                    const iconElement = document.getElementById('file-icon');
                    
                    // 如果是AKTP文件，使用Bootstrap Icons的加密文件图标
                    if (ext === 'aktp') {
                        iconElement.outerHTML = '<i class="bi bi-file-earmark-lock" id="file-icon"></i>';
                    }
                    // 对于其他文件类型，保持默认的Bootstrap Icons
                    // 可以根据需要添加更多文件类型的图标
                }
            });
    </script>

    <script>
        // 深色模式切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const themeToggle = document.getElementById('theme-toggle');
            const themeIcon = themeToggle.querySelector('i');
            
            // 检查本地存储或系统偏好
            const savedTheme = localStorage.getItem('theme') || 
                            (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
            
            if (savedTheme === 'dark') {
                document.documentElement.setAttribute('data-theme', 'dark');
                themeIcon.className = 'bi bi-sun';
                themeToggle.innerHTML = '<i class="bi bi-sun"></i> 浅色模式';
            }
            
            // 切换主题
            themeToggle.addEventListener('click', function() {
                const currentTheme = document.documentElement.getAttribute('data-theme');
                if (currentTheme === 'dark') {
                    document.documentElement.removeAttribute('data-theme');
                    localStorage.setItem('theme', 'light');
                    themeIcon.className = 'bi bi-moon';
                    themeToggle.innerHTML = '<i class="bi bi-moon"></i> 深色模式';
                } else {
                    document.documentElement.setAttribute('data-theme', 'dark');
                    localStorage.setItem('theme', 'dark');
                    themeIcon.className = 'bi bi-sun';
                    themeToggle.innerHTML = '<i class="bi bi-sun"></i> 浅色模式';
                }
            });
        });
    </script>
    
    <!-- 模态窗口 -->
    <div id="modal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content" style="background-color: var(--card-bg); color: var(--text-color); border-color: var(--border-color);">
                <div class="modal-header" style="border-bottom-color: var(--border-color);">
                    <h5 id="modal-title" class="modal-title"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="filter: invert(var(--invert-filter));"></button>
                </div>
                <div id="modal-content" class="modal-body"></div>
            </div>
        </div>
    </div>
    
    <!-- 确认对话框 -->
    <div id="confirm-dialog" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="background-color: var(--card-bg); color: var(--text-color); border-color: var(--border-color);">
                <div class="modal-header" style="border-bottom-color: var(--border-color);">
                    <h5 class="modal-title">确认操作</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="filter: invert(var(--invert-filter));"></button>
                </div>
                <div id="confirm-message" class="modal-body"></div>
                <div class="modal-footer" style="border-top-color: var(--border-color);">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="background-color: var(--gray); border-color: var(--gray);">取消</button>
                    <button type="button" id="confirm-ok" class="btn btn-primary" style="background-color: var(--primary); border-color: var(--primary);">确认</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 消息提示 -->
    <div id="message-toast" class="toast align-items-center text-white border-0" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 20px; right: 20px; z-index: 9999;">
        <div class="d-flex">
            <div id="message-content" class="toast-body"></div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
    
    <style>
        /* 模态窗口样式 */
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        /* 深色模式适配 */
        [data-theme="dark"] .modal-content {
            background-color: var(--card-bg);
            color: var(--text-color);
        }
        
        /* 确保模态窗口在深色模式下的可读性 */
        [data-theme="dark"] {
            --invert-filter: 1;
        }
        
        :not([data-theme="dark"]) {
            --invert-filter: 0;
        }
    </style>
    
    <script>
        // 模态窗口函数
        function showModal(title, content) {
            const modal = new bootstrap.Modal(document.getElementById('modal'));
            document.getElementById('modal-title').textContent = title;
            document.getElementById('modal-content').innerHTML = content;
            modal.show();
        }
        
        // 确认对话框函数
        function showConfirm(message, callback) {
            const confirmDialog = new bootstrap.Modal(document.getElementById('confirm-dialog'));
            document.getElementById('confirm-message').textContent = message;
            
            // 移除之前的事件监听器
            const confirmOkBtn = document.getElementById('confirm-ok');
            const newConfirmOkBtn = confirmOkBtn.cloneNode(true);
            confirmOkBtn.parentNode.replaceChild(newConfirmOkBtn, confirmOkBtn);
            
            // 添加新的事件监听器
            newConfirmOkBtn.addEventListener('click', function() {
                confirmDialog.hide();
                if (typeof callback === 'function') {
                    callback(true);
                }
            });
            
            // 监听模态窗口关闭事件
            document.getElementById('confirm-dialog').addEventListener('hidden.bs.modal', function handler() {
                if (typeof callback === 'function') {
                    setTimeout(() => {
                        callback(false);
                    }, 100);
                }
                document.getElementById('confirm-dialog').removeEventListener('hidden.bs.modal', handler);
            });
            
            confirmDialog.show();
        }
        
        // 消息提示函数
        function showMessage(message, type = 'info') {
            const toast = new bootstrap.Toast(document.getElementById('message-toast'));
            const toastEl = document.getElementById('message-toast');
            const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
            
            // 设置消息类型样式
            toastEl.className = 'toast align-items-center border-0';
            
            if (isDarkMode) {
                // 深色模式下的样式
                if (type === 'success') {
                    toastEl.classList.add('bg-dark-success');
                } else if (type === 'error') {
                    toastEl.classList.add('bg-dark-error');
                } else if (type === 'warning') {
                    toastEl.classList.add('bg-dark-warning');
                } else {
                    toastEl.classList.add('bg-dark-info');
                }
            } else {
                // 浅色模式下的样式
                if (type === 'success') {
                    toastEl.classList.add('bg-success');
                } else if (type === 'error') {
                    toastEl.classList.add('bg-danger');
                } else if (type === 'warning') {
                    toastEl.classList.add('bg-warning');
                } else {
                    toastEl.classList.add('bg-info');
                }
            }
            
            document.getElementById('message-content').textContent = message;
            toast.show();
        }
    </script>
</body>
</html>